﻿<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<base href="/">
<!-- jsp文件头和头部 -->
<%@ include file="../../system/index/top.jsp"%>
 
 <style>
 *{
  margin: 0;
}
#tree{
  position: relative;
  z-index: 2;
}
 #tree >.items{  margin-top: 0; }
 #canvas{
  position: absolute;
  left:0;
  top: 0;
}

.items {
  width: 100%;
  text-align: center;
  position: relative;
  margin-top: 100px;
  white-space: nowrap;
  display: flex;
  flex-wrap: wrap;
}

.items .items {
  flex: 1;
  text-align: center;
  line-height: 30px;
  border-radius: 50%;
  position: relative;

  
}

.child {
  width: 80px;
  height: 60px;
  border: 1px solid #000;
  text-align: center;
  line-height: 30px;
  border-radius: 50%;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  display:flex;
  align-items: center;
  justify-content: center;
  left: 0;
  right: 0;
  color:#fff;
  background-color: #2b7dbc;
}
.child.xw{background-color: #fff;color:#333;}
#back{
position:relative;
z-index:10;
padding:2px 20px;
font-size: 14px;

}
.child-data{
line-height:24px;
	
}
.child-data p{
margin:0;
}
  </style>
</head>
<body>
<button id="back">返回</button>
<div id="tree"></div>
<canvas id="canvas" width="100%" height="100%"></canvas>
<input type="hidden" id="code" value="${code}">
<input type="hidden" id="userId" value="${userId}">
<input type="hidden" id="top" value="${top}">
  <script type="text/javascript" src="static/js/jquery-1.7.2.js"></script>
  <script type="text/javascript" src="plugins/layer/layer.js"></script>
  <script type="text/javascript" src="static/activity/tree/index.js"></script>
</body>

  <script type="text/javascript">
  		$(top.hangge());
  		var code,userId,level = 0;
  		init();
  		function init(){
  			code = $('#code').val();
  			userId = $('#userId').val();
  			level = $('#top').val();
  			data();
  		}
  		function data(){
  			html='';
            $.ajax({
                url: "activityMultil/listActivityTree",
                type: "post",
                async: true,
                dataType: "json",
                data: {"code": code, "userId": userId, "top": level},
                success: function (v) {
                    var state = v.result.state;
                    if(state == 1){
                    	treeMap = v.userInfoMap;
                    	console.log(treeMap);
                    	treeData(treeMap[v.userId]);
                    	$('#tree').html(html);
                    	tree();
                    	layer.msg('加载成功', {icon: 1});
                    }else{
                    	layer.msg('加载失败', {icon: 1});
                    }
                }, error: function (XMLHttpRequest, textStatus) {
                	layer.msg('加载失败', {icon: 1});
                }
            });
  		}
  		function add(nodeId,phone){
  			$.ajax({
                url: "activityMultil/addActivityTree",
                type: "post",
                async: true,
                dataType: "json",
                data: {"code": code, "userId": nodeId, "phone": phone},
                success: function (v) {
                    var state = v.result.state;
                    if(state == 1){
                    	layer.alert('添加成功', {
                    		  skin: 'layui-layer-molv' //样式类名
                    		  ,closeBtn: 0
                    		}, function(){
                    		  data();
                    		});
                    }else{
                    	layer.msg(v.result.message, {icon: 1});
                    }
                }, error: function (XMLHttpRequest, textStatus) {
                	layer.msg('添加失败', {icon: 1});
                }
            });
  		}
  		
  		function update(nodeId, phone){
  			$.ajax({
                url: "activityMultil/updateActivityTree",
                type: "post",
                async: true,
                dataType: "json",
                data: {"code": code, "userId": nodeId, "phone": phone},
                success: function (v) {
                    var state = v.result.state;
                    if(state == 1){
                    	layer.alert('变更成功', {
                    		  skin: 'layui-layer-molv' //样式类名
                    		  ,closeBtn: 0
                    		}, function(){
                    		  data();
                    		});
                    }else{
                    	layer.msg(v.result.message, {icon: 1});
                    }
                }, error: function (XMLHttpRequest, textStatus) {
                	layer.msg('变更失败', {icon: 1});
                }
            });
  			
  		}
  		
  		$('body').on('click','#back',function(){
  			init();
  		})
  </script>
</html>
